<!-- 密码输入组件 -->
<script lang="ts" setup>
// import { useI18n } from "vue-i18n";
import { useToggle } from "@vueuse/core";


import InputBase from "./InputBase.vue";

// 定义 props
defineProps<{
    modelValue?: string
    placeholder?: string
    autofocus?: boolean;
    clearable?: boolean;
    label?: string
}>()

// 定义外部事件
const emit = defineEmits(["update:modelValue"]);

const [showPwd, toggleShowPwd] = useToggle(false);

// 内部事件
const onClear = () => emit('update:modelValue', '');
const onInput = (value: string) => emit('update:modelValue', value);

// const { t } = useI18n();


</script>
<template>
    <InputBase   :type="showPwd ? 'text' : 'password'"
        maxlength="16" :model-value="modelValue" :autofocus="autofocus"
        :placeholder="placeholder" :clearable="clearable" @clear="onClear" :label="label" @input="onInput">
        <!-- <template #prepend>
            <div class="icon_box">
              <img :src="$img('common/pwd_icon.png')" />
            </div>
          </template> -->
        <template #append>
            <Icon class="icon-eyes" :name="showPwd ? 'icon-xianshimimaicon' : 'icon-yincangmimaicon'"
                @click="() => toggleShowPwd()"></Icon>
        </template>
    </InputBase>
</template>
<style lang="scss" scoped>
.icon-eyes {
    margin-left: 50px;
    color: #a6a6a7;
}
.icon_box {
      width: 36px;
      height: 36px;
      margin-right: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
</style>
